<script lang="ts">
  export default {
    name: 'Accessories',
  };
</script>

<script setup lang="ts">
  import { computed, onMounted, ref, unref } from 'vue';
  import { showConfirmDialog, showToast, showLoadingToast, closeToast } from 'vant';
  import { useRouter } from 'vue-router'
  import API_BANNER from '@/apis/banner';

  import img1 from '@/assets/shop/goods1.avif'
  import img2 from '@/assets/shop/goods2.avif'
  import img3 from '@/assets/shop/goods3.avif'
  import img4 from '@/assets/shop/goods4.avif'
  import img5 from '@/assets/shop/goods5.avif'
  import img6 from '@/assets/shop/goods6.avif'
  import img7 from '@/assets/shop/accessories1.avif'
  onMounted(() => {

  });
  let router = useRouter()
  let list = ref([
    {
      text: 'Ocean Bloom',
      price: '$450.00',
      img: img6,
      id: 6
    },
    {
      text: 'Le Bag Autre',
      price: '$1,999.00',
      img: img7,
      id: 4
    },
    {
      text: 'Aqua Stride Bottle',
      price: '$99.00',
      img: img5,
      id: 5
    },
    {
      text: 'Horizon Gaze Sunglasses',
      price: '$50.00',
      img: img3,
      id: 3
    },
    {
      text: 'Shadow Stride Shoes',
      price: '$120.00',
      img: img2,
      id: 2
    },
    {
      text: 'SunBeam Tote',
      price: '$99.00',
      img: img1,
      id: 1
    },])

</script>

<template>
  <div>
    <Shop_headers></Shop_headers>
    <div class="shopContainer">
      <div class="category">Accessories</div>
      <Goods_list :filteredProducts="list"></Goods_list>
    </div>
    <Shop_footer></Shop_footer>
  </div>
</template>

<style lang="less" scoped>
  .category {
    margin: 26px 0;
    font-size: 32px;
    font-weight: 600;
  }
</style>